<template>
  <inline-modal :visible="visible" @ok="ok" @cancel="cancel" :title="title" destroyOnClose>
    <div class="main">
      <a-spin :spinning="loading">
        <a-form :form="form">
          <a-form-item class="hiddenItem">
            <!-- uuid隐藏 -->
            <a-input v-decorator="['uuid']" disabled type="hidden" />
          </a-form-item>
          <a-card title="" :bordered="false" style="width: 100%">
            <a-row>
              <a-col span="12">
                <a-form-item label="表名" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-input v-decorator="['tableName', {
                    rules: [{ required: true, message: '请输入表名' },
                    { pattern: /^[a-zA-Z][^\u4e00-\u9fff]*$/, message: '首字符必须为字母且不能包含汉字' }]
                  }]" allowClear placeholder="请输入表名" />
                </a-form-item>
              </a-col>
              <a-col span="12">
                <a-form-item label="表注释" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-input v-decorator="['tableRemarks', { rules: [{ required: true, message: '请输入表注释' }] }]" allowClear
                    placeholder="请输入表注释" />
                </a-form-item>
              </a-col>
              <!-- 旧表名 -->
              <a-col span="12">
                <a-form-item class="hiddenItem">
                  <a-input v-decorator="['oldTableName']" type="hidden" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-card>

          <a-card title="字段信息" :bordered="false" style="width: 100%">
            <div class="margin-xs">
              <a-button type="primary" icon="plus" @click="handleAdd">新增字段</a-button>
            </div>
            <a-table ref="table" :columns="columns" :data-source="data" :bordered="false"
              size="small" rowKey="index" :pagination="false">
              <span slot="serial" slot-scope="text, record, index">
                {{ index + 1 }}
              </span>
              <template :slot="'fieldName'" slot-scope="text, record, index">
                <div>
                  <a-form-item>
                    <a-input v-decorator="['fieldName' + record.id, {
                      initialValue: text, rules: [{ required: true, message: '必填!' },
                      { validator: columnNameValidator, message: '字段名不能重复!' },
                      { pattern: /^[a-zA-Z][^\u4e00-\u9fff]*$/, message: '首字符必须为字母且不能包含汉字!' },
                      { validator: NameNoAs, message: '不能使用as作为名称!' }]
                    }]
                      " allowClear @change="e => handleChange(e.target.value, index, 'fieldName')" />
                  </a-form-item>
                </div>
              </template>
              <template :slot="'fieldComment'" slot-scope="text, record, index">
                <div>
                  <a-form-item>
                    <a-input v-decorator="['fieldComment' + record.id,
                    { initialValue: text, rules: [{ required: true, message: '必填!' }] },
                    ]" allowClear @change="e => handleChange(e.target.value, index, 'fieldComment')" />
                  </a-form-item>
                </div>
              </template>
              <!-- 旧字段名称 -->
              <template :slot="'oldFieldName'" slot-scope="text, record, index">
                <div>
                  <a-form-item>
                    <a-input v-decorator="['oldFieldName' + record.id]" type="hidden" />
                  </a-form-item>
                </div>
              </template>
              <template :slot="'fieldDefaultsValue'" slot-scope="text, record, index">
                <div>
                  <a-form-item>
                    <a-input v-decorator="['fieldDefaultsValue' + record.id, { initialValue: text },
                    ]" allowClear @change="e => handleChange(e.target.value, index, 'fieldDefaultsValue')"
                      :maxLength="maxNum[index]" :disabled="isDefaultsValue(record)" />
                  </a-form-item>
                </div>
              </template>
              <template :slot="'fieldDecimalPoint'" slot-scope="text, record, index">
                <div>
                  <a-form-item>
                    <a-input v-decorator="['fieldDecimalPoint' + record.id,
                    {
                      initialValue: text, rules: [{ pattern: /^[0-9]*$/, message: '只能输入数字', trigger: 'blur' },
                      { validator: (rule, value, callback) => validatePoint(rule, value, callback, index) },
                      { required: pointRequired[index], message: '必填!' }]
                    },
                    ]" allowClear @change="e => handleChange(e.target.value, index, 'fieldDecimalPoint')"
                      :disabled="record.fieldType !== 'double' ? true : false" />
                  </a-form-item>
                </div>
              </template>
              <template :slot="'fieldType'" slot-scope="text, record, index">
                <a-form-item>
                  <div>
                    <a-select style="width: 100%" @change="val => handleChange(val, index, 'fieldType')" v-decorator="['fieldType' + record.id,
                    { initialValue: text, rules: [{ required: true, message: '必填!' }] }]">
                      <a-select-option value="varchar">
                        varchar
                      </a-select-option>
                      <a-select-option value="int">
                        int
                      </a-select-option>
                      <a-select-option value="datetime">
                        datetime
                      </a-select-option>
                      <a-select-option value="char">
                        char
                      </a-select-option>
                      <a-select-option value="text">
                        text
                      </a-select-option>
                      <a-select-option value="double">
                        double
                      </a-select-option>
                      <a-select-option value="tinyint">
                        tinyint
                      </a-select-option>
                      <a-select-option value="bigint">
                        bigint
                      </a-select-option>
                      <a-select-option value="timestamp">
                        timestamp
                      </a-select-option>
                    </a-select>
                  </div>
                </a-form-item>
              </template>
              <template :slot="'fieldLength'" slot-scope="text, record, index">
                <a-form-item>
                  <div>
                    <a-input-number :min="0" :max="maxLength[index]"
                      @change="val => handleChange(val, index, 'fieldLength')" v-decorator="[
                        'fieldLength' + record.id,
                        {
                          initialValue: text,
                          rules: [{ required: fieldLengthShow[index], message: '请输入长度' },
                          { pattern: /^[1-9]\d*$/, message: '只能输入整数' }]
                        },
                      ]" :disabled="isLength(record)" />
                  </div>
                </a-form-item>
              </template>
              <template :slot="'fieldAllowNull'" slot-scope="text, record, index">
                <div>
                  <a-form-item>
                    <a-checkbox :disabled="isAllowNull(record)" v-decorator="['fieldAllowNull' + record.id]"
                      :checked="text" @change="e => handleChange(e.target.checked, index, 'fieldAllowNull')">
                    </a-checkbox>
                  </a-form-item>
                </div>
              </template>
              <template :slot="'fieldPrimaryKey'" slot-scope="text, record, index">
                <div>
                  <a-form-item>
                    <a-checkbox :disabled="isCheckboxDisabled(record)" v-decorator="[
                      'fieldPrimaryKey' + record.id]" :checked="text"
                      @change="e => handleChange(e.target.checked, index, 'fieldPrimaryKey')">
                    </a-checkbox>
                  </a-form-item>
                </div>
              </template>
              <template slot="operation" slot-scope="text, record, index">
                <div class="editable-row-operations">
                  <span>
                    <a-popconfirm title="确定删除吗？" @confirm="() => handleDel(record, index)">
                      <a class="action-delete">删除</a>
                    </a-popconfirm>
                  </span>
                </div>
              </template>
            </a-table>
          </a-card>
        </a-form>
      </a-spin>
    </div>
  </inline-modal>
</template>

<script>
import pick from "lodash.pick";

import TDictSelectTag from "@/components/TopVUI/dict/TDictSelectTag";
import ARow from "ant-design-vue/es/grid/Row";
import { add } from "lodash";

// 表单字段
const fields = ['tableName', 'tableRemarks', 'oldTableName'];
//表头
const columns = [
  {
    title: "序号",
    width: 80,
    fixed: 'left',
    align: "center",
    dataIndex: "serial",
    scopedSlots: { customRender: "serial" },
  },
  {
    title: '字段名称',
    dataIndex: 'fieldName',
    scopedSlots: { customRender: 'fieldName' },
  },
  {
    title: '字段类型',
    dataIndex: 'fieldType',
    width: '15%',
    scopedSlots: { customRender: 'fieldType' },
  },
  {
    title: '长度',
    dataIndex: 'fieldLength',
    scopedSlots: { customRender: 'fieldLength' },
  },
  {
    title: '默认值',
    dataIndex: 'fieldDefaultsValue',
    scopedSlots: { customRender: 'fieldDefaultsValue' },
  },
  {
    title: '小数点',
    dataIndex: 'fieldDecimalPoint',
    scopedSlots: { customRender: 'fieldDecimalPoint' },
  },
  {
    title: '注释',
    dataIndex: 'fieldComment',
    scopedSlots: { customRender: 'fieldComment' },
  },
  {
    title: '允许空',
    dataIndex: 'fieldAllowNull',
    scopedSlots: { customRender: 'fieldAllowNull' },
  },
  {
    title: '主键',
    dataIndex: 'fieldPrimaryKey',
    scopedSlots: { customRender: 'fieldPrimaryKey' },
  },
  {
    title: '操作',
    dataIndex: 'operation',
    scopedSlots: { customRender: 'operation' },
  },
];
export default {
  props: {
    visible: {
      type: Boolean,
      // required: true,
    },
    loading: {
      type: Boolean,
      default: () => false,
    },
    model: {
      type: Object,
      default: () => null,
    },
  },
  components: {
    TDictSelectTag, ARow
  },
  data() {
    return {
      tableName: '',
      tableRemarks: '',
      oldTableName: '',
      data: [],
      columns,
      cacheData: [],
      count: 0,
      title: "",
      labelCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 4,
        },
      },
      wrapperCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 20,
        },
      },
      form: this.$form.createForm(this),
      sourceObj: {},
      targetObj: {},
      fieldLengthShow: [],//长度是否校验
      maxLength: [],//长度最大值
      // DefaultsValueRequired: [],//默认值是否必填
      maxNum: [],//默认值最大输入长度
      PrimaryKey: false,//主键点选一个禁用其他主键
      maxPoint: [], //小数点输入最大值
      pointRequired: [], //小数点是否必填
      url: {
        deleteBatch: "/system/sysDatabaseConnection/dropColumn",
        postName: "/system/sysDatabaseConnection/modifyType"
      },
    };
  },
  computed: {
    //选空值和datetime不可选主键
    isCheckboxDisabled: function () {
      return function (record) {
        return (this.PrimaryKey && !record.fieldPrimaryKey) || record.fieldType === 'datetime' || record.fieldAllowNull === true || record.fieldType === 'timestamp' || record.fieldType === 'text';
      }.bind(this);
    },
    //选主键不可为空
    isAllowNull: () => (record) => {
      return record.fieldPrimaryKey === true
    },
    //选datetime和timestamp不可输入长度
    isLength: () => (record) => {
      return record.fieldType === 'datetime' || record.fieldType === 'timestamp' || record.fieldType === 'text'
    },
    //选text和timestamp不可选默认值
    isDefaultsValue: () => (record) => {
      return record.fieldType === 'text' || record.fieldType === 'timestamp'
    }
  },
  methods: {
    // 拖拽
    customRow(record, index) {
      return {
        props: {
          draggable: 'true'
        },
        style: {
          cursor: 'grab'
        },
        on: {
          // 鼠标移入
          mouseenter: (event) => {
            // 兼容IE
            var ev = event || window.event
            ev.target.draggable = true
          },
          // 开始拖拽
          dragstart: (event) => {
            // 兼容IE
            var ev = event || window.event
            // 阻止冒泡
            ev.stopPropagation()
            // 得到源目标数据
            this.sourceObj = record
          },
          // 拖动元素经过的元素
          dragover: (event) => {
            // 兼容 IE
            var ev = event || window.event
            // 阻止默认行为
            ev.preventDefault()
          },
          // 鼠标松开
          drop: (event) => {
            // 兼容IE
            var ev = event || window.event
            // 阻止冒泡
            ev.stopPropagation()
            // 得到目标数据
            this.targetObj = record
            const tempData = this.data

            tempData[this.targetObj.weight] = this.sourceObj
            tempData[this.sourceObj.weight] = this.targetObj

            let weightList = []
            tempData.forEach((item, index) => {
              weightList.push({
                id: item.id,
                weight: index,
                fieldName: item.fieldName,
                fieldType: item.fieldType,
                fieldLength: item.fieldLength,
                fieldDefaultsValue: item.fieldDefaultsValue,
                fieldDecimalPoint: item.fieldDecimalPoint,
                fieldComment: item.fieldComment,
                fieldAllowNull: item.fieldAllowNull,
                fieldPrimaryKey: item.fieldPrimaryKey,
                operation: item.operation,
                oldFieldName: item.oldFieldName
              })
            })
            this.data = weightList

            function swapElements(arr, index1, index2) {
              const temp = arr[index1]
              arr[index1] = arr[index2]
              arr[index2] = temp
            }

            // 更新maxNum数组
            const tempMaxNum = [...this.maxNum]
            swapElements(tempMaxNum, this.sourceObj.weight, this.targetObj.weight)
            this.maxNum = tempMaxNum

            // 更新maxLength数组
            const tempMaxLength = [...this.maxLength]
            swapElements(tempMaxLength, this.sourceObj.weight, this.targetObj.weight)
            this.maxLength = tempMaxLength

            // 更新fieldLengthShow数组
            const tempFieldLengthShow = [...this.fieldLengthShow]
            swapElements(tempFieldLengthShow, this.sourceObj.weight, this.targetObj.weight)
            this.fieldLengthShow = tempFieldLengthShow

            // 更新maxPoint数组
            const tempMaxPoint = [...this.maxPoint]
            swapElements(tempMaxPoint, this.sourceObj.weight, this.targetObj.weight)
            this.maxPoint = tempMaxPoint

            // 更新pointRequired数组
            const tempPointRequired = [...this.pointRequired]
            swapElements(tempPointRequired, this.sourceObj.weight, this.targetObj.weight)
            this.pointRequired = tempPointRequired
          }
        }
      }
    },
    add(m, data) {
      this.form.setFieldsValue({
        tableName: '',
        tableRemarks: '',
        oldtableName: '',
      })
    },
    edit(m, data) {
      //添加旧表名
      let oldTableName = m.tableName.toString()
      this.$nextTick(() => {
        this.form.setFieldsValue({
          oldTableName: oldTableName
        })
        this.form.setFieldsValue(pick(m, fields));
      })
      if (m.columsData) {
        m.columsData.forEach((item) => {
          //给每个字段添加旧字段名
          item.oldFieldName = item.fieldName
          //编辑时查询表中是否已存在主键
          if (item.fieldPrimaryKey) {
            this.PrimaryKey = true
          }
          //编辑时获取每个字段默认值最大输入长度
          if (item.fieldLength) {
            if (item.fieldType === 'double') {
              this.maxNum.push(item.fieldLength - item.fieldDecimalPoint)
            } else {
              this.maxNum.push(item.fieldLength)
            }
          } else {
            this.maxNum.push(255)
          }
          //编辑时获取已有字段的长度最大值
          if (item.fieldType === 'tinyint') {
            this.maxLength.push(3)
          } else if (item.fieldType === 'bigint') {
            this.maxLength.push(20)
          } else {
            this.maxLength.push(255)
          }
          //编辑时获取不需要要校验长的字段
          if (item.fieldType === 'text' || item.fieldType === 'datetime' || item.fieldType === 'timestamp') {
            this.fieldLengthShow.push(false)
          } else {
            this.fieldLengthShow.push(true)
          }
          //编辑时获取double的长度值限制小数点输入最大值
          if (item.fieldType === 'double') {
            this.maxPoint.push(item.fieldLength)
          } else {
            this.maxPoint.push(30)
          }
        })
      }
    },
    //输入框内容改变，给当前数据赋值
    handleChange(value, index, column) {
      if (column === 'fieldLength') {
        if (value) {
          //当类型为double时获取长度，用于校验小数点输入最大值
          if (this.data[index].fieldType === 'double') {
            this.maxPoint[index] = value
            //长度发生变化清空小数点
            this.form.setFieldsValue({
              ['fieldDecimalPoint' + this.data[index].id]: ''
            })
            this.data[index].fieldDecimalPoint = null
          }
          this.maxNum[index] = value //fieldLength的值为多少默认值最大输入长度为多少
          //长度发生变化清空默认值
          this.form.setFieldsValue({
            ['fieldDefaultsValue' + this.data[index].id]: ''
          })
          this.data[index].fieldDefaultsValue = null
        }
      }
      //类型为double时，默认值最大输入长度为长度-小数点
      else if (column === 'fieldDecimalPoint') {
        if (this.data[index].fieldType === 'double') {
          this.maxNum[index] = this.data[index].fieldLength - value
        }
      }
      else if (column === 'fieldPrimaryKey' && value === true) {
        this.PrimaryKey = true //当选择了一个主键的时候禁用其他主键
      }
      else if (column === 'fieldPrimaryKey' && value === false) {
        this.PrimaryKey = false //取消选择主键
      }
      else if (column === 'fieldType' && value === 'datetime' || value === 'timestamp') {
        this.maxLength[index] = 255
        this.changeDel(column, index)
        this.postName(index)
        this.fieldLengthShow[index] = false
        if(this.data[index].fieldPrimaryKey){
          this.PrimaryKey = false
          this.$set(this.data[index], 'fieldPrimaryKey', false)
        }
      }
      else if (column === 'fieldType' && value === 'tinyint') {
        this.maxLength[index] = 3
        this.changeDel(column, index)
        this.postName(index)
      }
      else if (column === 'fieldType' && value === 'bigint') {
        this.maxLength[index] = 20
        this.changeDel(column, index)
        this.postName(index)
      }
      else if (column === 'fieldType' && value === 'text') {
        this.maxLength[index] = 255
        this.changeDel(column, index)
        this.postName(index)
        this.fieldLengthShow[index] = false
        if(this.data[index].fieldPrimaryKey){
          this.PrimaryKey = false
          this.$set(this.data[index], 'fieldPrimaryKey', false)
        }
      }
      else if (column === 'fieldType' && value === 'varchar' || value === 'char' || value === 'int') {
        this.maxLength[index] = 255
        this.changeDel(column, index)
        this.postName(index)
      } else if (column === 'fieldType' && value === 'double') {
        this.maxLength[index] = 255
        this.changeDel(column, index)
        this.postName(index)
        this.pointRequired[index] = true
      }
      this.$set(this.data[index], column, value)
    },
    //删除
    handleDel(record, index) {
      this.count--
      if (record.fieldPrimaryKey === true) {
        this.PrimaryKey = false // 删除选中的主键后解除主键禁用
      }
      if (record.oldFieldName) {
        let value = {
          dbConUuid: this.model.uuid,
          tableName: this.model.tableName,
          fieldName: record.fieldName,
        }
        // 在这里调用删除接口
        this.$post(this.url.deleteBatch, value).then((res) => {
          if (res.statusCode === 200 || res === 0) {
            this.$message.success(res.message, 1.5)
            this.data.splice(index, 1)
            this.fieldLengthShow.splice(index, 1)
            this.maxLength.splice(index, 1)
            this.maxPoint.splice(index, 1)
            this.pointRequired.splice(index, 1)
          } else {
            this.$message.error(res.message, 1.5)
          }
        })
      } else {
        this.data.splice(index, 1)
        this.fieldLengthShow.splice(index, 1)
        this.maxLength.splice(index, 1)
        this.maxPoint.splice(index, 1)
      }
    },
    //新增
    handleAdd() {
      //增加校验规则
      this.fieldLengthShow.push(true)
      this.maxLength.push(255)
      this.maxPoint.push(30)
      this.maxNum.push(255)
      this.pointRequired.push(false)
      this.data.push({
        id: this.count,
        weight: this.count
      })
      this.data.forEach((item, index) => {
        this.data[index].weight = index
      })
      //新建字符段默认为varchar，长度100
      if (this.data[this.count] !== undefined) {
        this.data[this.count].fieldType = 'varchar'
        this.data[this.count].fieldLength = 100
        this.data[this.count].fieldAllowNull = true
      }
      this.count++
    },
    //确定校验是否设置了组件
    ok() {
      if (this.PrimaryKey) {
        this.$emit('ok')
      } else {
        this.$message.error('请设置主键', 1.5)
      }
    },
    cancel() {
      //清空校验权限
      this.PrimaryKey = false
      this.maxLength = []
      this.fieldLengthShow = []
      this.maxPoint = []
      this.maxNum = []
      this.$emit('cancel')
    },
    //编辑修改字符类型传递名称
    postName(index) {
      if (this.model && JSON.stringify(this.model) != '{}') {
        if (this.model.columsData[index].oldFieldName) {
          let oldType = this.form.getFieldValue('fieldType' + this.data[index].id)
          let value = {
            dbConUuid: this.model.uuid,
            tableName: this.model.tableName,
            fieldName: this.form.getFieldValue('fieldName' + this.data[index].id)
          }
          this.$post(this.url.postName, value).then((res) => {
            if (res.statusCode === 200 || res === 0) {
            } else {
              this.form.setFieldsValue({
                ['fieldType' + this.data[index].id]: oldType
              })
              this.$message.error(res.message, 1.5)
            }
          })
        }
      }
    },
    //type修改时清空长度,默认值,小数点
    changeDel(column, index) {
      if (column === 'fieldType') {
        this.form.setFieldsValue({
          ['fieldLength' + this.data[index].id]: "",
          ['fieldDefaultsValue' + this.data[index].id]: "",
          ['fieldDecimalPoint' + this.data[index].id]: "",
        })
        this.data[index].fieldLength = null
        this.data[index].fieldDefaultsValue = null
        this.data[index].fieldDecimalPoint = null
      }
    },
    //默认值必须为yyyy-MM-DD格式
    validateDate(rule, value, callback) {
      if (value !== '') {
        if (/^(\d{4})-(\d{1,2})-(\d{1,2})$/.test(value)) {
          callback();
        } else {
          callback(new Error('请输入日期格式为yyyy-MM-dd的日期'));
        }
      } else {
        callback();
      }
    },
    //默认值必须为整数数字
    validateIntegerNumber(rule, value, callback) {
      if (value !== '') {
        if (/^\d+$/.test(value)) {
          callback();
        } else {
          callback(new Error('请输入整数数字'));
        }
      } else {
        callback();
      }
    },
    //默认值必须为数字
    validateNumber(rule, value, callback) {
      if (value !== '') {
        const reg = /^-?[0-9]+(\.[0-9]+)?$/;
        if (value && !reg.test(value)) {
          callback(new Error('请输入数字'));
        } else {
          callback();
        }
      } else {
        callback();
      }
    },
    //默认值最大输入127
    validateMaxValue(rule, value, callback) {
      if (value && parseInt(value) > 127) { // 判断最大值是否大于 127
        callback(`最大值不能超过 127`);
      } else {
        callback();
      }
    },
    //小数点最大值为30 or 长度
    validatePoint(rule, value, callback, index) {
      if (value >= this.maxPoint[index]) {
        callback(new Error('输入的数字必须小于长度'));
      } else if (value >= 30) {
        callback(new Error('输入的数字必须小于30'));
      } else {
        callback();
      }
    },
    //字段名称不能重复
    columnNameValidator(rule, val) {
      let count = 0;
      this.data.forEach((item, index) => {
        if (item.fieldName === val) {
          count++
        }
      })
      return count === 1
    },
    //字段名不能使用as
    NameNoAs(rule, value, callback) {
      if (value === 'as') {
        callback(new Error('不能使用 as 作为字段名'))
      } else {
        callback();
      }
    }
  },
  created() {
    // 防止表单未注册
    fields.forEach((v) => this.form.getFieldDecorator(v));
    // 当 model 发生改变时，为表单设置值
    this.$watch('model', () => {
      if (this.model && this.model.columsData) {
        this.data = this.model.columsData
        //添加id
        this.data.forEach((item, index) => {
          this.data[index].id = index
        })
        this.count = this.data.length
      } else {
        this.count = 0
        this.data = []
      }
    });
  },
};
</script>
<style scoped lang="less">
.modal-full-layout {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  z-index: 999;
  display: flex;
  flex-direction: column;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px;
    border-bottom: 1px solid #dcdfe6;

    .header-left {
      display: flex;
      align-items: center;
      justify-content: center;

      .title {
        font-size: 16px;
      }

      .text {
        padding: 0 5px;
      }
    }
  }

  .main {
    flex: 1;
    overflow: scroll;
    padding: 10px;
  }

}

// /deep/.ant-form-explain {
//   display: none !important;
// }

/deep/div[class^="ant-table-wrapper"] .ant-table .ant-table-tbody tr,
/deep/div[class^="ant-table-wrapper"] .ant-table .ant-table-thead tr {
  height: 41px !important;
}

.action-delete {
  color: red !important;
}
</style>
